<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客户管理</title>
  <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
  <link href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all" rel="stylesheet" type="text/css" />
  <script type=javascript src="${pageContext.request.contextPath}/layui/jquery2.1.1.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/table.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/form.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/layer.js" ></script>

</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>营销管理</li>
    <li>客户浏览</li>
    <li>基本内容</li>
  </ul>
</div>
<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">公司名称</label>
    <div class="layui-input-inline">
      <input type="text" id="company" name="company" placeholder="请输入" autocomplete="off" class="layui-input" >
    </div>

    <label class="layui-form-label">客户姓名</label>
    <div class="layui-input-inline">
      <input type="text" id="name" name="name" placeholder="请输入" autocomplete="off" class="layui-input" >
    </div>

    <label class="layui-form-label">所属区域</label>
    <div class="layui-input-inline">
      <select name="province" id="province" lay-filter="province">
        <option value="0">请选择省份</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="city" id="city" lay-filter="city">
        <option value="0">请选择城市</option>
      </select>
    </div>

    <div class="layui-btn-container">
      <button type="button" class="layui-btn btn-search">查询</button>
    </div>
  </div>

  <table id="demo" lay-filter="test"></table>
</form>

<script>
  layui.use(['table', 'form'], function () {
    var table = layui.table,
            form = layui.form,
            $ = layui.jquery;
    form.render();

    $.ajax({
      url: "/region/provice",
      type: "post",
      dataType: "json",
      success: function(data) {
        var json = eval("("+data+")");

        //使用循环遍历，给下拉列表赋值
        $("#province").empty();
        $("#province").append(new Option("请选择",""))
        for(var i=0;i<json.length;i++){
          $("#province").append('<option value="'+json[i].name+'">'+json[i].name+'</option>');
        }
        form.render("select")//重新渲染 固定写法
      }
    });
//省份城市联动
    form.on('select(province)',function (data) {
      var pname=data.value;
      if(pname==''){
        $('#city').empty();
        $('#city').append('<option value="">请选择城市</option>');
      }else{
        $('#city').empty();
        $('#city').append('<option value="">请选择城市</option>');
        $.ajax({
          url: '/region/city?pname='+pname,
          type: 'post',
          data: 'pname='+pname,
          //dataType: 'json',
          //contentType:"application/json",
          success: function (resps) {
            layui.$('#city').empty();
            layui.$('#city').append('<option value="">请选择城市</option>');
            var json=JSON.parse(resps);
            var jsonList=eval("("+json+")");
            for(var i=0;i<jsonList.length;i++) {
              var name=jsonList[i].cName;
              layui.$('#city').append(
                      '<option value="'+name+'">'+name+'</option>'
              );
            }
            layui.form.render();
          },
          error: function () {
            layer.closeAll('loading');
            layer.msg('系统错误，请联系管理员', {icon: 5});
          }
        });
      }
      form.render();
    });

    $('.btn-search').on('click', function () {
      var company = $('#company').val();
      var name = $('#name').val();
      var province = $('#province').val();
      var city = $('#city').val();
      table.reload('demo', {
        url: '/customer/getAllCustomerList',
        method: 'post',
        dataType: 'json',
        where: { //设定异步数据接口的额外参数，任意设
          company: company,
          name: name,
          province: province,
          city: city,
        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
      form.render();
    });

    table.render({
      elem: '#demo'
      ,height: 400
      ,url: '/customer/getAllCustomerList' //数据接口
      ,page: true //开启分页
      ,limits: [1, 2, 3, 4,5]
      ,limit: 5   // 每页条数
      ,cols: [[ //表头
        {field: '_id', title: '序号', width:150, type:"numbers", fixed: 'left',align: "center" }
        ,{field: 'id', title: '序号', width:150, sort: true, fixed: 'left',align: "center" }
        ,{field: 'name', title: '客户姓名', width:150, sort: true,align: "center"}
        ,{field: 'sex', title: '性别', width:150,align: "center"}
        ,{field: 'tel', title: '联系电话', width:150,align: "center"}
        ,{field: 'company', title: '所属公司', width: 150,align: "center"}
        ,{field: 'area', title: '所属区域', width: 150,align: "center",
          templet:function(res){
            var area = res.province+res.city
            return area
          }
        }
        ,{field: 'status', title: '状态', width: 100,align: "center",
          templet:function(res){
            if(res.status=='1'){
              return '可用';
            }else{
              return '不可用';
            }
          }
        }
        ,{field: 'createTime', title: '创建时间', width: 150,align: "center"}
        ,{field: 'creater', title: '创建人', width: 90,align: "center"}
        ,{field: 'finalTime', title: '分配时间', width: 200,align: "center"}
        ,{field: 'staff', title: '客户人员', width: 100,align: "center"}
        ,{field: 'describe', title: '描述', width: 100,align: "center"}
        ,{field: 'address', title: '联系地址', width: 100,align: "center"}
        ,{title: '操作', width: 125, toolbar: '#barDemo', align: "center"}
      ]]
      ,done: function (){
        $("[data-field='id']").css('display','none');
        $("[data-field='describe']").css('display','none');
        $("[data-field='address']").css('display','none');
        $("[data-field='createTime']").css('display','none');
        $("[data-field='creater']").css('display','none');
        $("[data-field='status']").css('display','none');
      }
    });

    //工具条事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

      if(layEvent === 'detail'){ //查看
        form.val("detail",data);
        layer.open({
          type: 2,
          shift: 2,
          title: '查看信息',
          area: ['1000px', '700px'],
          closeBtn: false,
          shadeClose: false,
          content: 'market/customer/customerView.jsp',
          btnAlign: 'c',
          btn: ['关闭'],
          success: function (layero, index) {
            var body = layer.getChildFrame('body', index);
            body.find("#name").val(data.name);
            body.find("#sex").val(data.sex);
            body.find("#company").val(data.company);
            body.find("#tel").val(data.tel);
            body.find("#address").val(data.address);
            body.find("#province").val(data.province);
            body.find("#city").val(data.city);
            body.find("#describe").val(data.describe);
            body.find("#status").val(data.status);
            body.find("#creater").val(data.creater);
            var body = layer.getChildFrame('body', index);
            var date = new Date();
            body.find("#createTime").val(date.toLocaleString());
          },
        });
        //form.render();
      }
    });
  })
</script>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
</script>
</body>
</html>
